<template>
    <Teleport to="#before-navigation" v-if="targetExists">
        <QuizNav
            :quizList="
                answerInfo.questions.map(item => {
                    return { id: item.id, isMark: item.isMark }
                })
            "
            :anchorTag="anchorTag"
            v-loading="loading"
            :quizId="quizId"
            :isAnswer="true"
            :isReview="false"
            :submitHandle="submitHandle"
            :isNew="true"
        />
    </Teleport>

    <div v-loading="loading">
        <div class="quiz-list">
            <div class="quiz-item" v-for="(question, index) in answerInfo.questions" :key="question.id" :id="`${anchorTag}${question.id}`">
                <div class="quiz-info">
                    <h3>
                        {{ $t('mod.quiz.attempt.quiz_info.tit') }}<span class="qno">{{ index + 1 }}</span>
                    </h3>
                    <div class="state">{{ answerInfo.user_answer.length ? $t('mod.quiz.attempt.quiz_info.con_1') : $t('mod.quiz.attempt.quiz_info.con_2') }}</div>
                    <div class="grade">{{ $t('mod.quiz.attempt.quiz_info.con_3') }}{{ question.score }}</div>
                    <el-button link class="quiz-mark" @click="question.isMark = !question.isMark">
                        <el-icon v-if="question.isMark"><CircleClose /></el-icon>
                        <el-icon v-else><CircleCheck /></el-icon>
                        {{ question.isMark ? $t('mod.quiz.attempt.quiz_info.con_4') : $t('mod.quiz.attempt.quiz_info.con_5') }}
                    </el-button>
                </div>
                <div class="quiz-content">
                    <div class="question-answer-box">
                        <div class="q-text">{{ question.question_point }}</div>
                        <div class="q-text" v-html="question.question_detail"></div>
                        <el-radio-group v-model="answerInfo.user_answer[index].selected_option_ids" v-if="question.question_type === 1">
                            <el-radio :value="answer.id" v-for="answer in question.answer" :key="answer.id">
                                <span class="opt-val" v-html="answer.answer_text"></span>
                            </el-radio>
                        </el-radio-group>
                        <el-checkbox-group v-model="answerInfo.user_answer[index].selected_option_ids" v-else>
                            <el-checkbox :value="answer.id" v-for="answer in question.answer" :key="answer.id">
                                <span class="opt-val" v-html="answer.answer_text"></span>
                            </el-checkbox>
                        </el-checkbox-group>
                        <el-button link class="remove-answer" @click="answerInfo.user_answer[index].selected_option_ids = []" v-if="answerInfo.user_answer[index].selected_option_ids">
                            {{ $t('mod.quiz.attempt.quiz_content.btn_text') }}
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-list">
            <el-button color="#F06423" @click="submitHandle" :loading="saveLoading">{{ $t('mod.quiz.attempt.btn_text') }}</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import QuizNav from '@/components/QuizNav.vue'

import QuizService from '@/api/quiz'
import type { AnswerItem, QuizInfo } from '@/types/quiz'

const route = useRoute()
const router = useRouter()
const anchorTag = ref('quiz')
const courseId = computed(() => Number(route.params.courseId))
const unitId = computed(() => Number(route.params.unitId))
const quizId = computed(() => Number(route.params.quizId))
const loading = ref(false)
const saveLoading = ref(false)
const targetExists = ref(false)

const answerInfo = ref<AnswerItem>({
    id: 0,
    quiz_id: 0,
    student_id: 0,
    total_score: '',
    actual_score: '',
    status: 1,
    start_time: '',
    end_time: '',
    duration: '',
    questions: [],
    user_answer: [],
    grade_answer: [],
    status_text: '',
})
function getLastAnswerRecord() {
    loading.value = true
    QuizService.lastRecord(quizId.value)
        .then(res => {
            answerInfo.value = res
        })
        .finally(() => {
            loading.value = false
        })
}
const submitHandle = () => {
    saveLoading.value = true

    const data = {
        action: 'save',
        answers: answerInfo.value.user_answer,
    }
    QuizService.saveRecord(answerInfo.value.id, data)
        .then(res => {
            if (res.id) {
                router.push({
                    name: 'quizSummary',
                    params: {
                        courseId: courseId.value,
                        unitId: unitId.value,
                        quizId: quizId.value,
                        recordId: res.id,
                    },
                })
            }
        })
        .finally(() => {
            saveLoading.value = false
        })
}

const quizInfo = ref<QuizInfo>()
function getQuizInfo() {
    QuizService.getById(quizId.value).then(res => {
        quizInfo.value = res
    })
}

onMounted(() => {
    getQuizInfo()
    getLastAnswerRecord()
    targetExists.value = !!document.querySelector('#before-navigation')
})
</script>

<style lang="less" scoped>
@import '@/assets/styles/variable.less';
.quiz-list {
    width: 100%;

    .quiz-item {
        margin-bottom: 28px;
        display: flex;
        align-items: flex-start;
        gap: 18px;
        @media screen and (max-width: @lPhone) {
            flex-wrap: wrap;
        }
        .quiz-info {
            margin-bottom: 28px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
            border-radius: 2px;
            padding: 8px;
            background-color: #f9f9f9;
            width: 128px;
            font-size: 12px;
            color: #4c4c4c;
            line-height: 1.6;
            flex-shrink: 0;
            @media screen and (max-width: @lPhone) {
                width: 100%;
                margin-bottom: 0;
            }
            h3 {
                border-radius: 2px;
                padding: 2px 6px;
                color: #fff;
                background-color: #f06423;
                line-height: 1;

                .qno {
                    font-size: 20px;
                }
            }

            .state,
            .grade {
                margin-top: 8px;
            }

            :deep(.quiz-mark) {
                margin-top: 8px;
                padding: 0;
                color: #4c4c4c;
                font-size: 12px;
                line-height: 20px;

                & > span {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                }
            }
        }

        .quiz-content {
            flex-grow: 1;
            @media screen and (max-width: @lPhone) {
                width: 100%;
            }
            .question-answer-box {
                border-radius: 4px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
                padding: 12px;
                background-color: #f9f9f9;
                width: 100%;

                :deep(.q-text) {
                    font-size: 15px;
                    color: #4c4c4c;
                    line-height: 1.6;

                    p,
                    li {
                        margin-bottom: 8px;
                    }
                }

                .el-radio-group {
                    margin-top: 22px;
                    padding-left: 8px;
                    width: 100%;

                    :deep(.el-radio) {
                        margin-top: 8px;
                        font-size: 15px;
                        color: #4c4c4c;
                        line-height: 1.6;
                        height: auto;
                        width: 100%;
                        align-items: flex-start;

                        .el-radio__input {
                            margin-top: 6px;
                        }

                        .el-radio__label {
                            font-weight: 400;
                            white-space: wrap;

                            display: flex;
                            align-items: flex-start;
                            gap: 10px;
                        }

                        .el-radio__input.is-checked + .el-radio__label {
                            color: #4c4c4c;
                        }
                    }
                }

                .el-checkbox-group {
                    margin-top: 22px;
                    padding-left: 8px;
                    width: 100%;

                    :deep(.el-checkbox) {
                        margin-top: 14px;
                        font-size: 15px;
                        color: #4c4c4c;
                        line-height: 1.6;
                        height: auto;
                        width: 100%;
                        align-items: flex-start;

                        .el-checkbox__label {
                            font-weight: 400;
                            white-space: wrap;

                            display: flex;
                            align-items: flex-start;
                            gap: 10px;
                        }

                        .el-checkbox__input.is-checked + .el-checkbox__label {
                            color: #4c4c4c;
                        }
                    }
                }

                .remove-answer {
                    margin-top: 28px;
                    color: #4c4c4c;

                    &:hover {
                        color: #f06423;
                    }
                }
            }
        }
    }
}

.btn-list {
    margin-top: 22px;
    display: flex;
    justify-content: flex-end;
}
</style>
